import React, {useEffect, useState} from 'react'
import { View } from '@tarojs/components';
import ScrollPageView from 'components/ScrollPageView';
import Popup from '../../Popup/index'
import Icon from '../../../../components/Icon';
import styles from './index.module.scss'
import Taro from '@tarojs/taro';
import classNames from 'classnames/bind';

function Purchase() {
  const [position, setPosition] = useState<'top' | 'right' | 'bottom' | 'left'>('bottom')
// 控制第一段动画的开关
  const [toTop, setToTop] = useState(false)
  // 按钮缩小之后，清除站位的样式开关，并且是第三段下移动画的开关
  const [toEnd, setToEnd] = useState(false)
  // 第三段动画位移X
  const [toCartX, setToCartX] = useState<number>()
  // 第三段动画位移Y
  const [toCartY, setToCartY] = useState<number>()
  // 第三段动画位移样式
  const [toCart, setToCart] = useState<React.CSSProperties>({})
  // 第四段动画触发开关
  const [cartScale, setCartScale] = useState(false)
  // 管理移入的button是否显示
  const [hide, setHide] = useState(false)
  // 购物车下标显示开关
  const [visible, setVisible] = useState(false)
  // 主页面显示Add to cart按钮
  const [buttonVisible, setButtonVisible] = useState(false)

  // 计算Add to cart的初始位置

  // 计算Add to cart 按钮需要移动的位置
  useEffect(() => {
    Taro.createSelectorQuery().select(`.${styles.to_cart_wrapper}`).boundingClientRect(rect1 => {
      let buttonX = rect1.left ;
      let buttonY = rect1.top;
      let buttonWidth = rect1.width
      let buttonBottom = rect1.bottom

      Taro.createSelectorQuery().select(`.${styles.icon_container}.${styles.cart}`).boundingClientRect((rect2) => {
        let cartX = rect2.left;
        let cartY = rect2.top ;

        setToCart({position:'absolute', bottom:`${buttonBottom}px`, left:`${buttonX}px`})
        setToCartX(cartX - buttonX - ((buttonWidth -50)/2));
        setToCartY(cartY - buttonY);
      }).exec();
    }).exec();
  }, []);

  // 动画结束后，提供一个时间节点

  useEffect(() => {
    if(toEnd){
      setToCart({
        ...toCart,
        transform:`translate(${toCartX}px, ${toCartY}px)`
      })
    }
  }, [toEnd]);

  const animation = () => {
    // toTop结束后打开第二段开关
    setToEnd(true)
    if(Object.keys(toCart).length){
      setCartScale(true)
      setHide(true)
    }
  }
  console.log(toCart)
  const handleATC = () => {

  }
  const cx = classNames.bind(styles)
  const __add_to_cart = cx('to_cart_container', {
    'to_top': toTop
  },{
    'hide': hide
  },{
    'buttonVisible': buttonVisible
  })
  const __number = cx('number', {
    'to_top': toTop
  })

  const __icon = cx('icon', {
    'to_top': toTop
  },{
    'end' : toEnd
  })

  const __title = cx('title', {
    'to_top': toTop
  },{
    'end' : toEnd
  })

  const __icon_cart = cx('icon_container', 'cart', {
    'cartScale':cartScale
  })

  const __cart_number = cx('cart_number', {
    'visible': visible
  })

  const [show,setShow] = useState(false)

  return (
    <ScrollPageView navigation={{ title: 'watchApp' }}>
      <View onClick={() => setShow(true)}>弹出</View>
      <View>
        <View className={__add_to_cart} onClick={() => setToTop(true)} style={toCart} onTransitionEnd={animation}>
          <Icon className={__icon} name='rect_210' size={26} color='#FFF'/>
          <View className={__title} style={{marginLeft: '16px'}}>ADD TO CART</View>
          <View className={__number}>1</View>
        </View>
      </View>
      <View className={styles.icon_wrapper}>
        <View className={`${styles.icon_container} ${styles.heart}`}>
          <Icon name='heart' size={26} />
        </View>
        <View className={styles.cart_container}>
          <View className={__icon_cart} onAnimationEnd={() => {setVisible(true)}}>
            <Icon name='rect_210' size={26}/>
          </View>
          <View className={__cart_number}>1</View>
        </View>
      </View>
      <Popup show={show} onMaskClick={()=>setShow(false)} position={position}>
        <View className={styles.purchase}>
          <View className={styles.purchase_container}>
            <View className={styles.product_info}>
              <View className={styles.product_image_container}></View>
              <View className={styles.product_description}>
                <View className={styles.product_name}>Metro Parrot Blush Leather Watch</View>
                <View className={styles.product_price}>$ 195.00</View>
              </View>
            </View>
            <View className={styles.divider}></View>
            <View className={styles.color_list}>
              <View className={styles.color_description}>COLOR CATEGORY</View>
              <View className={styles.button_container}>
                <View className={styles.button}>PINK</View>
                <View className={styles.button}>YELLOW</View>
                <View className={styles.button}>GREEN</View>
              </View>
            </View>
            <View className={styles.to_cart_wrapper}>
              <View className={styles.add_to_cart} onClick={handleATC}>
                <Icon className={styles.icon} name='rect_210' size={26} color='#FFF'/>
                <View className={styles.title} style={{marginLeft: '7px'}}>ADD TO CART</View>
              </View>
            </View>
          </View>
        </View>
      </Popup>
    </ScrollPageView>
  )
}

export default Purchase;